<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="_fragments :: head(~{::title})">
        <!--<meta charset="UTF-8">-->
        <!--浏览器移动端预览-->
        <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
        <title>首页</title>
        <!--<link rel="stylesheet" href="../static/css/semantic.min.css">-->
        <!--<link rel="stylesheet" href="../static/css/me.css">-->
        <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
    </head>
    <body>
        <!--首部-->
        <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-opacity-mini m-shadow-small">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu">
                    <h2 class="ui teal header item">天乔巴夏</h2>
                    <!--menu-->
                    <a href="index.html" class=" m-item item m-mobile-hide"><i class="archive icon"></i>首页</a>
                     <a href="tags.html"  class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                    <a href="archives.html"  class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                    <a href="aboutme.html"  class="m-item item m-mobile-hide"><i class="user icon"></i>关于我</a>
                    <!--search box-->
                    <div class="right item">
                        <div class="ui icon input">
                            <input type="text" placeholder="搜索">
                            <i class="search link icon"></i>
                        </div>
                    </div>
                    <a href="admin/blogs.html" class="m-item item m-mobile-hide"><i class="icon server"></i>后台管理</a>
                </div>
            </div>
            <a href="#" id="side" class="ui inverted icon button m-top-right m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--中间部分-->
        <div class="m-container m-padded-tb-big">
            <div class="ui container">
                <div class="ui stackable grid">
                    <!--左边博客列表-->
                    <div class="eleven wide column">
                        <div class="ui top attached segment">
                            <div class="ui middle aligned two column grid">
                                <div class="column">
                                    <h3 class="ui teal header m-text-spaced-massive">博客</h3>
                                </div>
                                <div class="right aligned column">
                                    共 <h3 class="ui header teal m-inline-block m-text-thin">14</h3> 篇
                                </div>
                            </div>
                        </div>
                        <!--content-->
                        <div class="ui attached segment ">
                            <div class="ui padded vertical segment m-padded-tb">
                                <div class="ui grid mobile reversed stackable">
                                    <div class="ui eleven wide column">

                                        <a href="#"><h3 class="ui header">剑指 Offer 67. 把字符串转换成整数</h3></a>
                                        <br>
                                        <p class="m-text">
                                            当我们寻找到的第一个非空字符为正或者负号时，则将该符号与之后面尽可能多的连续数字组合起来，作为该整数的正负号；假如第一个非空字符是数字，则直接将其与之后连续的数字字符组合起来，形成整数。</p>
                                        <div class="ui grid">
                                            <div class="thirteen wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img th:src="@{/images/example.jpg}" alt=""
                                                             class="ui avatar image">
                                                        <div class="content"><a href="#" class="header">天乔巴夏</a></div>

                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon"></i> 2020-05-23
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon comment"></i> 20
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon eye"></i> 520
                                                    </div>
                                                </div>
                                            </div>
                                            <div class=" three right aligned wide column ">
                                                <a href="#" class="ui teal basic m-padded-mini label" target="_blank">
                                                    leetcode</a>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="ui five wide column">
                                        <a href="#" target="_blank">
                                            <img th:src="@{/images/example.jpg}" alt="" class="ui rounded image">
                                        </a>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="ui attached segment ">
                            <div class="ui padded vertical segment m-padded-tb">
                                <div class="ui grid mobile reversed stackable">
                                    <div class="ui eleven wide column">

                                        <a href="#"><h3 class="ui header">剑指 Offer 67. 把字符串转换成整数</h3></a>
                                        <br>
                                        <p class="m-text">
                                            当我们寻找到的第一个非空字符为正或者负号时，则将该符号与之后面尽可能多的连续数字组合起来，作为该整数的正负号；假如第一个非空字符是数字，则直接将其与之后连续的数字字符组合起来，形成整数。</p>
                                        <div class="ui grid">
                                            <div class="thirteen wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img th:src="@{/images/example.jpg}" alt=""
                                                             class="ui avatar image">
                                                        <div class="content"><a href="#" class="header">天乔巴夏</a></div>

                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon"></i> 2020-05-23
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon comment"></i> 20
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon eye"></i> 520
                                                    </div>
                                                </div>
                                            </div>
                                            <div class=" three right aligned wide column ">
                                                <a href="#" class="ui teal basic m-padded-mini label" target="_blank">
                                                    leetcode</a>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="ui five wide column">
                                        <a href="#" target="_blank">
                                            <img th:src="@{/images/example.jpg}" alt="" class="ui rounded image">
                                        </a>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="ui attached segment ">
                            <div class="ui padded vertical segment m-padded-tb">
                                <div class="ui grid mobile reversed stackable">
                                    <div class="ui eleven wide column">

                                        <a href="#"><h3 class="ui header">剑指 Offer 67. 把字符串转换成整数</h3></a>
                                        <br>
                                        <p class="m-text">
                                            当我们寻找到的第一个非空字符为正或者负号时，则将该符号与之后面尽可能多的连续数字组合起来，作为该整数的正负号；假如第一个非空字符是数字，则直接将其与之后连续的数字字符组合起来，形成整数。</p>
                                        <div class="ui grid">
                                            <div class="thirteen wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img th:src="@{/images/example.jpg}" alt=""
                                                             class="ui avatar image">
                                                        <div class="content"><a href="#" class="header">天乔巴夏</a></div>

                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon"></i> 2020-05-23
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon comment"></i> 20
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon eye"></i> 520
                                                    </div>
                                                </div>
                                            </div>
                                            <div class=" three right aligned wide column ">
                                                <a href="#" class="ui teal basic m-padded-mini label" target="_blank">
                                                    leetcode</a>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="ui five wide column">
                                        <a href="#" target="_blank">
                                            <img th:src="@{/images/example.jpg}" alt="" class="ui rounded image">
                                        </a>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="ui attached segment ">
                            <div class="ui padded vertical segment m-padded-tb">
                                <div class="ui grid mobile reversed stackable">
                                    <div class="ui eleven wide column">

                                        <a href="#"><h3 class="ui header">剑指 Offer 67. 把字符串转换成整数</h3></a>
                                        <br>
                                        <p class="m-text">
                                            当我们寻找到的第一个非空字符为正或者负号时，则将该符号与之后面尽可能多的连续数字组合起来，作为该整数的正负号；假如第一个非空字符是数字，则直接将其与之后连续的数字字符组合起来，形成整数。</p>
                                        <div class="ui grid">
                                            <div class="thirteen wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img th:src="@{/images/example.jpg}" alt=""
                                                             class="ui avatar image">
                                                        <div class="content"><a href="#" class="header">天乔巴夏</a></div>

                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon"></i> 2020-05-23
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon comment"></i> 20
                                                    </div>
                                                    <div class="item">
                                                        <i class="icon eye"></i> 520
                                                    </div>
                                                </div>
                                            </div>
                                            <div class=" three right aligned wide column ">
                                                <a href="#" class="ui teal basic m-padded-mini label" target="_blank">
                                                    leetcode</a>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="ui five wide column">
                                        <a href="#" target="_blank">
                                            <img th:src="@{/images/example.jpg}" alt="" class="ui rounded image">
                                        </a>
                                    </div>
                                </div>
                            </div>


                        </div>



                        <!--footer-->
                        <div class="ui bottom attached segment">
                            <div class="ui two column grid middle aligned">
                                <div class="column">

                                    <a href="#" class="ui teal mini basic button">上一页</a>


                                </div>
                                <div class="right aligned column">

                                    <a href="#" class="ui teal mini basic button">下一页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--右边侧边栏-->
                    <div class="five wide column">
                        <!--分类-->
                        <div class="segments ui ">
                            <!--分类列表-->
                            <div class="ui secondary segment">
                                <div class="ui two column grid">
                                    <div class="column">
                                        <i class="idea icon"></i>分类
                                    </div>
                                    <div class="right aligned column">
                                        <a href="#" target="_blank">more <i class="icon angle double right"></i></a>
                                    </div>
                                </div>

                            </div>
                            <div class="ui teal segment">
                                <div class="ui fluid vertical menu">
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>
                                    <a href="#" class="item">
                                        Java
                                        <div class="ui teal very basic left pointing label">13</div>
                                    </a>

                                </div>
                            </div>
                        </div>
                        <!--标签-->
                        <div class="segments ui m-margin-top-large">
                            <!--标签-->
                            <div class="ui secondary segment">
                                <div class="ui two column grid">
                                    <div class="column">
                                        <i class="tags icon"></i>标签
                                    </div>
                                    <div class="right aligned column">
                                        <a href="#" target="_blank">more <i class="icon angle double right"></i></a>
                                    </div>
                                </div>

                            </div>
                            <div class="ui teal segment">
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    Java
                                    <div class="detail">23</div>
                                </a>
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    Python
                                    <div class="detail">23</div>
                                </a>
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    大数据
                                    <div class="detail">23</div>
                                </a>
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    SpringSecurity学习笔记
                                    <div class="detail">23</div>
                                </a>
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    Java
                                    <div class="detail">23</div>
                                </a>
                                <a href="#" class="ui teal basic label m-margin-tb-tiny">
                                    Java
                                    <div class="detail">23</div>
                                </a>
                            </div>
                        </div>
                        <!--最新推荐-->
                        <div class="segments ui m-margin-top-large">
                            <div class="ui secondary segment ">
                                <i class="bookmark icon"></i>最新推荐
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui segment">
                                <a href="#" target="_blank" class="m-black m-text-thin">Java从零开始学习笔记</a>
                            </div>
                            <div class="ui secondary segment m-text-center">
                                <a href="#" class="m-black ">查看全部</a> <i class="icon hand point right"></i>
                            </div>
                        </div>

                        <!--二维码-->
                        <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
                        <div class="ui centered card" style="width: 11em">
                            <img src="../static/images/contact/wechat.dib" th:src="@{/images/contact/wechat.dib}" alt="" class="ui rounded image" style="width: 210px;">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <br>
        <br>

        <!--底部-->
        <footer th:replace="_fragments::footer" class="ui inverted segment vertical m-padded-tb-massive m-padded-bottom-small">
            <div class="ui center aligned container">
                <!--16-->
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../static/images/contact/wechat.dib" th:src="@{/images/contact/wechat.dib}" alt="" class="ui rounded image"
                                     style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email: 1332790762@qq.com</a>
                            <a href="#" class="item">Phone: 123456789</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header m-opacity-mini">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">
                            Java小白，从零单排。文章如果有叙述不当的地方，还望评论区批评指正。当然，如果觉得文章对你有帮助，可以点个小小的推荐，或者关注我，一起交流，共同进步！</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2020 天乔巴夏 浙ICP备20020653号</p>
            </div>

        </footer>
        <th:block th:replace="_fragments::script">
            <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
            <!--<script src="../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>-->

            <!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
            <!--<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>-->
        </th:block>


        <script>
            $('#side').click(function () {
	            $('.m-item').toggleClass('m-mobile-hide')
			})
        </script>
    </body>
</html>